<template>
  <div class="tags">
    <el-tag
      class="tags-item"
      size="medium"
      v-for="item, index in tags"
      :key="item.path"
      :closable="index>0"
      :effect="
        item.title == $route.meta.titles[$route.meta.titles.length - 1]
          ? 'dark'
          : 'plain'
      "
      @click="goTo(item.path)"
      @close="handleClose(index)"
      @contextmenu.native.prevent="rightClick($event, index)"
    >
      <i
        class="cir"
        v-show="item.title == $route.meta.titles[$route.meta.titles.length - 1]"
      ></i>
      {{ item.title }}
    </el-tag>
    <TagsMenu @changeMenu="changeMenu" v-show="isShowTagsMenu" :clientX="clientX" :clientY="clientY" :index="index" :tagsLength="tags.length" />
  </div>
</template>

<script>
import TagsMenu from "./TagsMenu"
export default {
  data() {
    return {
      isShowTagsMenu: false,
      clientX: 0,
      clientY: 0,
      index: 0, // 当前右击标签的index
      tags: [
        {
          title: "首页",
          path: "/home",
          isActive: true,
        },
      ],
    };
  },
  watch: {
    $route: {
      immediate: true, // 立即监听
      handler(val, oldVal) {
        // 查找title是否已存在
        const bool = this.tags.find((item) => {
          return item.path == val.path;
        });
        if (!bool) {
          this.tags.push({
            title: val.meta.titles[val.meta.titles.length - 1],
            path: val.path,
            isActive: true,
          });
        }
      },
    },
  },
  components: {
    TagsMenu
  },
  mounted() {
    document.addEventListener("click", this.closeMenu);
    this.$once('hook:beforeDestroy', ()=>{
      document.removeEventListener('click', this.closeMenu)
    })
  },
  methods: {
    changeMenu(i) {
      if(i == 1) {
        // 关闭当前
        if (this.tags[this.index].path == this.$route.path ) {
          this.$router.push(this.tags[this.tags.length-2].path);
        }
        this.tags.splice(this.index, 1);
  
      } else if(i == 2) {
        let obj = this.tags[this.index]
        // 关闭其他
        this.tags = [
          {
            title: "首页",
            path: "/home",
            isActive: true,
          },
        ]
        this.index === 0 ? this.goTo('/home') : this.tags.push(obj); this.goTo(obj.path);
      } else if(i == 3) {
        // 关闭左侧
        // this.index > 1 ?  this.tags.splice(1,this.index -1) : ''
        this.tags.splice(1,this.index -1)
      } 
      else if(i == 4) {
        // 关闭右侧
        this.tags.splice(this.index+1);
        this.goTo(this.tags[this.tags.length-1].path);
      } else if (i == 5) {
      // 关闭全部
        this.tags = [
          {
            title: "首页",
            path: "/home",
            isActive: true,
          },
        ]
        this.goTo('/home');
      } 
    },
    closeMenu() {
      this.isShowTagsMenu = false;
    },
    rightClick(e, index) {
      this.isShowTagsMenu = true;
      this.clientX = e.clientX - 195;
      this.clientY = e.clientY;
      this.index = index;
      console.log("🚀 ~ file: Tags.vue:122 ~ rightClick ~ this.index:", this.index)
    },
    goTo(path) {
      if (path === this.$route.path) return
      this.closeMenu();
      this.$router.push(path);
    },
    handleClose(index) {
      // this.tags[index].title 当前点击的标签
      // this.$route.meta.titles[this.$route.meta.titles.length - 1] 当前路由
      // 如果点击的标签与当前路由是同一个则跳转到最后一个标签,
      if(this.tags[index].title === this.$route.meta.titles[this.$route.meta.titles.length - 1]) {
        // 如果是最后一项,则要跳转到倒数第二个标签(倒数第一个删除掉),所以减2
        index == this.tags.length-1 ? this.$router.push(this.tags[this.tags.length-2].path) : this.$router.push(this.tags[this.tags.length-1].path)
      } 
      this.tags.splice(index,1)
      this.closeMenu();
    },
  },
};
</script>
<style scoped lang='less'>
.tags {
  padding-top: 5px;
  padding-left: 20px;
  .tags-item {
    margin-right: 5px;
    cursor: pointer;
    .cir {
      width: 8px;
      height: 8px;
      background: #fff;
      border-radius: 50%;
      display: inline-block;
    }
    // &:first-child ::v-deep .el-icon-close {
    //   display: none!important;
    // }
  }
}
</style>